<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        #one>a{
            display: block;
            margin-top: 10px;
        }
    </style>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div>
        <p>卡号：<span th:text="${session.loginAccount.cardno}">卡号</span>&nbsp;&nbsp;<a href="/logout">退出登录</a></p>
        <div id="one" style="display: inline-block; height: 300px">
            <a href="#">查询余额</a>
            <a th:href="@{/toDeal}">转账</a>
            <a th:href="@{/list}">查询交易记录</a>
            <a href="#">修改密码</a>
        </div>
        <div id="two" style="display: inline-block;width: 600px;height: 300px;border: 1px solid blue;position: relative; top: 100px">
            <form>
                <div>当前操作：转账。请输入转入账号和金额后点击“转账”按钮</div>
                转入账号：<input type="text" name="cardno"><br/>
                转账金额：<input type="text" name="amount"><br/>
                <input type="button" value="转账" id="btn"/>
            </form>
        </div>
        <div id="message" style="display: inline-block;width: 600px;height: 300px;border: 1px solid blue;position: relative; top: 100px;display: none">
            <span id="msg">操作已成功</span>!请继续其他服务
        </div>
    </div>
<script>
    $("#btn").click(function (){
        var cardno = $("input[name='cardno']").val();
        var amount = $("input[name='amount']").val();
        var msg = $("#msg");
        $.ajax({
            url : "/deal",
            data: {
                "cardno":cardno,
                "amount":amount
            },
            dataType:"text",
            success:function (res){
                $("#two").css("display","none");
                $("#message").css("display","block");
                if (res == "true"){
                    msg.html("操作已成功");
                }else{
                    msg.html("操作已失败");
                }
            }
        })
    });
</script>
</body>
</html>